/*
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2022-02-07 08:43:06
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-08 06:25:31
 */

class pgl_axes {
  constructor(gl, a_Position, a_Color, length, nXcolor, nYcolor, nZcolor, dat_gui) {
    this.gl = gl;
    this.a_Position = a_Position;
    this.a_Color = a_Color;
    this.length = length;
    this.nXcolor = nXcolor;
    this.nYcolor = nYcolor;
    this.nZcolor = nZcolor;
    this.dat_gui = dat_gui;
    this.axesCtrlObj = {
      length,
      nXcolor,
      nYcolor,
      nZcolor
    }

    this.init()
    // 6个顶点坐标 18个浮点数
    // x轴的起点 0.0,0.0,0.0 终点1.0,0.0,0.0 以此类推
    this.vertices = new Float32Array([
      0, 0, 0, this.axesCtrlObj.length, 0, 0,
      0, 0, 0, 0, this.axesCtrlObj.length, 0,
      0, 0, 0, 0, 0, this.axesCtrlObj.length,

    ]);



    // 创建存放并传递顶点坐标的数据buffer
    this.vBuffer = gl.createBuffer();
    // 创建存放并传递顶点颜色的数据buffer
    this.clrBuffer = gl.createBuffer();

    this.FSIZE = this.vertices.BYTES_PER_ELEMENT; // 获取每个数组元素的字节数大小


  }
  init() {
    var axesGroup = this.dat_gui.addFolder("axes");
    var _this = this
    axesGroup.addColor(this.axesCtrlObj, "nXcolor")
      .onChange(function () {
        _this.draw()
      })
    axesGroup.addColor(this.axesCtrlObj, "nYcolor")
      .onChange(function () {
        _this.draw()
      })
    axesGroup.addColor(this.axesCtrlObj, "nZcolor")
      .onChange(function () {
        _this.draw()
      })

  }

  draw() {

    var clrArrayX = new Float32Array([1.0, 1.0, 1.0, 1.0])
    var clrArrayY = new Float32Array([1.0, 1.0, 1.0, 1.0])
    var clrArrayZ = new Float32Array([1.0, 1.0, 1.0, 1.0])

    // 颜色值转换

    ColorValueToColorArray(this.axesCtrlObj.nXcolor, clrArrayX)
    ColorValueToColorArray(this.axesCtrlObj.nYcolor, clrArrayY)
    ColorValueToColorArray(this.axesCtrlObj.nZcolor, clrArrayZ)

    // xyz轴颜色
    // x轴的起点颜色是红色 1.0,0.0,0.0 终点颜色与起点颜色一致1.0,0.0,0.0 以此类推
    this.Colors = new Float32Array([
      clrArrayX[0], clrArrayX[1], clrArrayX[2], clrArrayX[0], clrArrayX[1], clrArrayX[2],
      clrArrayY[0], clrArrayY[1], clrArrayY[2], clrArrayY[0], clrArrayY[1], clrArrayY[2],
      clrArrayZ[0], clrArrayZ[1], clrArrayZ[2], clrArrayZ[0], clrArrayZ[1], clrArrayZ[2],
    ]);

    clrArrayX = null
    clrArrayY = null
    clrArrayZ = null


    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.vertices, this.gl.STATIC_DRAW);
    // 将顶点坐标数据传递给attribute变量
    this.gl.vertexAttribPointer(this.a_Position, 3, this.gl.FLOAT, false, this.FSIZE * 3, 0);
    // 启用attribute变量
    this.gl.enableVertexAttribArray(this.a_Position);

    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.clrBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.Colors, this.gl.STATIC_DRAW);
    // 将顶点坐标数据传递给attribute变量
    this.gl.vertexAttribPointer(this.a_Color, 3, this.gl.FLOAT, false, this.FSIZE * 3, 0);
    // 启用attribute变量
    this.gl.enableVertexAttribArray(this.a_Color);

    this.gl.drawArrays(this.gl.LINES, 0, this.vertices.length / 3);
  }
}